<template>
	<div class="phone">
		<el-scrollbar class="phone-scrollbar">
			<div class="bg">
				<div class="actual-salary text-white text-center">
					<p>
						{{ content.sendHeader }}
					</p>
					<p class="pay-text px18">{{ content.actualSalary || '未收到工资条' }}</p>
				</div>
			</div>

			<div class="wage-content text-white flex-center flex-items-center">
				<p class="px10">
					{{ content.thanksStart }}{{ content.username }}， {{ content.thanksEnd }}
				</p>
			</div>

			<section :class="['pay-slip-content', { 'auto-confirmation': autoConfirmationSettings }]">
				<ul>
					<li class="flex-between px12" v-for="item in options" :key="item.title">
						<p>{{ item.title }}</p>
						<p class="text-secondary">{{ item.value || '' }}</p>
					</li>
				</ul>
			</section>

			<footer v-if="autoConfirmationSettings" class="pay-slip-footer">
				<span>{{ content.warmTips }}</span>
				<div class="flex-around">
					<button :class="['button', { 'has-feedback': feedbackSettings }]">
						<span class="px14">确认以上信息</span>
						<br />
						<span class="px10">{{ autoConfirmationDays }}天后自动确认</span>
					</button>
					<button v-if="feedbackSettings" class="button feedback">
						<span class="px10">去反馈</span>
					</button>
				</div>
			</footer>
		</el-scrollbar>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
	name: 'PhonePreview',
	props: {
		content: {
			type: Object,
			default: () => ({})
		},
		options: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			show: false
		}
	},
	computed: {
		...mapGetters(['feedbackSettings', 'autoConfirmationSettings', 'autoConfirmationDays'])
	},
	methods: {}
}
</script>

<style lang="scss">
.phone {
	.el-scrollbar.phone-scrollbar {
		height: 500px;
		background-color: #fff;
		-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

		.el-scrollbar__wrap {
			overflow-x: hidden;
			margin-right: -27px !important; // 隐藏原始滚动条
			padding-right: 10px;

			.el-scrollbar__view {
				overflow-x: hidden;
			}
		}
	}
	.bg {
		width: 100%;
		height: 90px;
		position: relative;
		background-color: rgba(74, 101, 115, 0.8);
		overflow: hidden;
		&:before,
		&:after {
			content: '';
			position: absolute;
			left: 50%;
			min-width: 1280px;
			min-height: 1280px;
			background-color: #4a6573;
			animation-name: rotate;
			animation-iteration-count: infinite;
			animation-timing-function: linear;
		}

		&:before {
			bottom: 24px;
			border-radius: 45%;
			animation-duration: 10s;
		}

		&:after {
			bottom: 8px;
			opacity: 0.3;
			border-radius: 47%;
			animation-duration: 10s;
		}

		@keyframes rotate {
			0% {
				transform: translate(-50%, 0) rotateZ(0deg);
			}
			50% {
				transform: translate(-50%, -2%) rotateZ(180deg);
			}
			100% {
				transform: translate(-50%, 0%) rotateZ(360deg);
			}
		}
	}
	.actual-salary {
		width: 100%;
		height: 100%;
		padding: 30px 0;
		position: absolute;
		z-index: 1;
		.arrow {
			position: absolute;
			right: 60px;
			top: 40px;
		}
		.pay-text {
			line-height: 60px;
		}
	}
	.actual-salary {
		width: 100%;
		height: 100%;
		padding: 30px 0;
		position: absolute;
		z-index: 1;
		.pay-text {
			line-height: 60px;
		}
	}
}
.wage-content {
	height: 60px;
	background-color: rgba(74, 101, 115, 0.8);
	border-bottom: 10px solid #eaebec;
}

.pay-slip-content {
	&.auto-confirmation {
		padding-bottom: 100px;
	}
	ul {
		padding: 0 20px;
		li {
			margin: 25px auto;
		}
	}
}

.pay-slip-footer {
	box-sizing: border-box;
	background: #fff;
	width: 100%;
	height: 100px;
	position: absolute;
	bottom: 0;
	padding: 10px 20px;
	& > div {
		.button {
			width: 100%;
			height: 50px;
			top: 5px;
			bottom: 5px;
			color: rgb(74, 101, 115);
			border-color: rgb(74, 101, 115);
			border-width: 1px;
			background-color: transparent;
			border-radius: 4px;
			margin: 10px auto;
			&.has-feedback {
				width: 60%;
			}
			span.px10 {
				display: inline-block;
				transform: scale(0.8);
			}
			&.feedback {
				width: 38%;
				color: #fff;
				background-color: rgb(74, 101, 115);
			}
		}
	}
}
</style>
